<template>
  <!-- 导航栏 -->
  <navbarback></navbarback>
  <view class="viewpoint">
    <scroll-view scroll-y>
      <!-- 上边 -->
      <view class="top">
        <view class="left">
          <view class="image">
            <image src="../../static/images/person_3.png" mode="scaleToFill" />
          </view>
          <view class="info">
            <view style="width: 100%; margin: 0rpx 5rpx"
              ><text style="font-size: 16rpx; color: black; font-weight: bold"
                >{{ infoform.name }}
                <text style="color: #b9b9b9; font-size: 14rpx"
                  >{{ infoform.age }}岁 {{ infoform.sex }}</text
                ></text
              ></view
            >
            <view class="disease_item">{{ infoform.disease }} </view>
          </view>
        </view>
        <view class="right">
          <view class="I">电话：{{ infoform.phoneNumber }}</view>
          <view class="I">地址：{{ infoform.address }}</view>
          <view class="I">身份证：{{ infoform.idNumber }}</view>
        </view>
      </view>
      <!-- 下面 -->
      <view class="bottom">
        <view class="bo-item" @tap="healtharchive">
          <view class="img">
            <image src="../../static/images/jkda.png" mode="scaleToFill" />
            <view class="text">健康档案</view>
          </view>
        </view>
        <view class="bo-item" @tap="healthcheck">
          <view class="img">
            <image src="../../static/images/jktj.png" mode="scaleToFill" />
            <view class="text">健康体检</view>
          </view>
        </view>
        <view class="bo-item" @tap="crowdvisit">
          <view class="img">
            <image src="../../static/images/rqsf.png" mode="scaleToFill" />
            <view class="text">人群随访</view>
          </view>
        </view>
        <view class="bo-item" @tap="healthvisit">
          <view class="img">
            <image src="../../static/images/sfbg.png" mode="scaleToFill" />
            <view class="text">随访报告</view>
          </view>
        </view>
        <view class="bo-item" @tap="tosign()">
          <view class="img">
            <image src="../../static/images/ysqy.png" mode="scaleToFill" />
            <view class="text">医生签约</view>
          </view>
        </view>
        <view class="bo-item" @tap="Homearchive">
          <view class="img">
            <image src="../../static/images/jtda.png" mode="scaleToFill" />
            <view class="text">家庭档案</view>
          </view>
        </view>
        <view class="bo-item" @tap="None">
          <view class="img">
            <image src="../../static/images/lygl.png" mode="scaleToFill" />
            <view class="text">更多功能</view>
          </view>
        </view>
        <!-- 占位元素 -->
        <view style="visibility: hidden" class="bo-item" @tap="Homearchive">
          <view class="img">
            <image src="../../static/images/家庭档案.png" mode="scaleToFill" />
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 普通弹窗 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content">
        <view class="title">请选择签约类型</view>
        <view class="button">
          <text @tap="personalsign">个人签约</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
import navbarback from '@/component/navbarback2.vue'
import homearchive from '../homearchive/homearchive.vue'
import { onShow } from '@dcloudio/uni-app'
const query = defineProps<{ params: any }>()
const infoform = ref()
const popup = ref()
infoform.value = JSON.parse(query.params)
//点击健康档案
const healtharchive = () => {
  uni.navigateTo({
    url: `/pages/healtharchive/healtharchive?params=${JSON.stringify(infoform.value)}`,
  })
}
//点击健康体检
const healthcheck = () => {
  uni.navigateTo({ url: `/pages/checklist/checklist?params=${JSON.stringify(infoform.value)}` })
}
//点击随访报告
const healthvisit = () => {
  uni.navigateTo({ url: `/pages/visitlist/visitlist?params=${JSON.stringify(infoform.value)}` })
}
//点击医生签约
const tosign = () => {
  if (infoform.value.sign == 1) {
    uni.showModal({
      title: '提示',
      content: '是否需要续约',
      success: function (res) {
        if (res.confirm) {
          uni.navigateTo({
            url: `/pages/signnext/siginnext?param1=${JSON.stringify(infoform.value)}`,
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      },
    })
  } else {
    popup.value.open('center')
  }
}
//点击家庭档案
const Homearchive = () => {
  uni.navigateTo({
    url: `/pages/homearchive/homearchive?params=${JSON.stringify(infoform.value)}`,
  })
}
//点击确认签约
const personalsign = () => {
  uni.navigateTo({
    url: `/pages/signnext/siginnext?param1=${JSON.stringify(infoform.value)}`,
  })
}
//
const None = () => {
  uni.showToast({ icon: 'none', title: '暂未开发' })
}
const crowdvisit = () => {
  uni.navigateTo({ url: '/pages/index/visit/components/SearchVisit' })
}
const doctorsign = () => {
  console.log(2)
}
onShow(() => {
  popup.value.close()
})
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}
.viewpoint {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 50rpx);
  padding: 10rpx 15rpx;
  width: 100%;
  .popup-content {
    height: 100rpx;
    width: 300rpx;
    display: flex;
    flex-direction: column;
    padding: 15rpx;
    .title {
      font-size: 18rpx;
      font-weight: bold;
      text-align: left;
      height: 20rpx;
      line-height: 20rpx;
    }
    .button {
      padding: 0 10rpx;
      flex: 1;
      font-size: 14rpx;
      margin-top: 20rpx;
      color: #00a8ff;
      display: flex;
      justify-content: space-between;
    }
  }
  .top {
    width: 100%;
    height: 80rpx;
    background-color: #fff;
    display: flex;
    padding: 5rpx;

    .left,
    .right {
      height: 100%;
      flex: 1;
    }
    .left {
      display: flex;
      justify-content: center;
      align-items: center;
      .image {
        height: 60rpx;
        width: 70rpx;
      }
      .info {
        flex: 1;
        height: 100%;
        .disease_item {
          margin: 0 5rpx;
          width: auto;
          background-color: #00a8ff;
          color: #fff;
          padding: 3rpx;
          font-weight: bold;
          border-radius: 4rpx;
          font-size: 12rpx;
        }
      }
    }
    .right {
      .I {
        margin: 4rpx 0;
        font-size: 14rpx;
        font-weight: bold;
        color: #b5b2b2;
      }
    }
  }
  .bottom {
    margin-top: 10rpx;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    .bo-item {
      margin-top: 4rpx;
      background-color: #fff;
      width: 24%;
      height: 150rpx;
      display: flex;
      justify-content: center;
      .img {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        image {
          height: 60rpx;
        }
        .text {
          font-size: 20rpx;
          color: #696868;
          height: 30rpx;
          width: 100%;
          text-align: center;
          line-height: 30rpx;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
